<template>
	<div>
		<template v-if="hasPermission('90240044')">
			<div style="width:100%;text-align:right;margin-bottom: 10px;">
				<div v-if="disabled">
					<el-button type="primary" size="small" @click="handleEdit">
						{{ $t('dxn.game_rule.edit_btn') }}
					</el-button>
				</div>
				<div v-else>
					<el-button
						type="plain"
						size="small"
						:disabled="btnLoading"
						@click="resetForm"
					>
						{{ $t('dxn.game_rule.cancel_btn') }}
					</el-button>
					<el-button
						type="primary"
						size="small"
						:disabled="btnLoading"
						:loading="btnLoading"
						@click="submitForm"
					>
						{{ $t('dxn.game_rule.save_btn') }}
					</el-button>
				</div>
			</div>
		</template>
		<div style="margin-left: 20px;">
			<el-form label-width="100px" @submit.native.prevent>
				<el-form-item v-for="(item, key) in configList" :key="key">
					<div slot="label" style="text-align:left;">
						<div style="margin-top:-10px;">底池加注</div>
						<div style="margin-top:-20px;">
							{{ getConfigDetail(key).title }}
						</div>
					</div>
					<Tags
						v-model="item.potFill"
						:tagsName="item.id"
						:disabled="disabled"
						:tagsDisableItem="getConfigDetail(key).disableItem"
						@updateTagsValidateResult="updateTagsValidateResult"
					/>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>
import Tags from '../tags'
export default {
	components: {
		Tags
	},
	props: {
		config: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
			tagsDisableItem: [{ code: '999999', desc: 'Allin' }],
			tagsDisableItemPlus: [
				{ code: '0', desc: '无' },
				{ code: '999999', desc: 'Allin' }
			],
			tagsValidateResult: {},
			configList: [],
			btnLoading: false,
			disabled: true
		}
	},
	watch: {
		config: {
			handler(val) {
				if (Array.isArray(val)) {
					this.configList = val
				}
			},
			deep: true,
			immediate: true
		}
	},
	methods: {
		updateTagsValidateResult(val, flag) {
			this.tagsValidateResult[val] = flag
		},
		getConfigDetail(key) {
			// 第一条和第五条是plus选项
			if ([0, 4].includes(key)) {
				return {
					title: '配置➕按钮',
					disableItem: this.tagsDisableItemPlus
				}
			} else {
				return {
					title: '配置默认按钮',
					disableItem: this.tagsDisableItem
				}
			}
		},
		getFormatForm(form) {
			const newForm = Object.assign({}, form)
			const potFillArr = Array.from(new Set(newForm.potFill.split(',')))
			const config = []
			potFillArr.forEach((item) => {
				const desc = this.tagsDisableItemPlus.find(
					(row) => item === row.code
				)?.desc
				const newItem = { code: item }
				if (desc) {
					newItem.desc = desc
				} else {
					newItem.desc =
						String(item).indexOf('/') > -1 ? item : item + '倍'
				}
				config.push(newItem)
			})
			newForm.config = JSON.stringify(config)
			delete newForm.potFill
			return newForm
		},
		// 点击保存
		submitForm() {
			const params = { config: [] }
			let isValidateOk = true
			for (let i = 0; i < this.configList.length; i++) {
				if (this.configList[i].potFill.split(',').length < 9) {
					this.$message.closeAll()
					this.$message.error(`每条配置最少9项，请新增选项`)
					isValidateOk = false
					break
				}
				// if (!this.tagsValidateResult[this.configList[i].id]) {
				// 	this.tagsValidateResult[this.configList[i].id] = true
				// 	isValidateOk = false
				// 	break
				// }
				params.config.push(this.getFormatForm(this.configList[i]))
			}
			if (isValidateOk) {
				// 保存
				this.btnLoading = true
				this.$api
					.setRaiseConfigBend(params)
					.then((res) => {
						this.btnLoading = false
						if (res?.code === 200) {
							this.$message.success(
								this.$t('common.action_success')
							)
							this.disabled = true
						}
					})
					.catch(() => {
						this.btnLoading = false
					})
			}
		},
		resetForm() {
			this.disabled = true
			this.$emit('cancel')
		},
		// 编辑
		handleEdit() {
			this.disabled = false
		}
	}
}
</script>
